<template>
  <div class="waybill-container">
    <!-- 表单 -->
    <el-card class="search-card-box" style="margin-bottom:20px;">
      <el-form ref="form" label-width="110px" label-position="right" :model="form">
        <el-row :gutter="20">
          <!-- 运单编号 -->
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="运单编号:">
              <el-input v-model="form.id" placeholder="请输入运单编号" />
            </el-form-item>
          </el-col>
          <!-- 订单编号 -->
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="订单编号:">
              <el-input v-model="form.orderId" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>
          <!-- 调度状态 -->
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="订单状态:">
              <el-select v-model="form.schedulingStatus" placeholder="请选择" style="width: 100%;">
                <el-option label="待调度" value="1" />
                <el-option label="未匹配路线" value="2" />
                <el-option label="已调度" value="3" /></el-select>
            </el-form-item>
          </el-col>
          <!-- 起始地机构: -->
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="起始地机构:">
              <Treeselect
                v-model="form.startAgencyId"
                placeholder="请选择"
                :options="departTree"
                :normalizer="normalizer"
              />

            </el-form-item>
          </el-col>
          <!-- 目的地机构: -->
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="目的地机构:">
              <Treeselect
                v-model="form.endAgencyId"
                placeholder="请选择"
                :options="departTree"
                :normalizer="normalizer"
              />
            </el-form-item>
          </el-col>
          <!-- 当前所在机构: -->
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px; ">
            <el-form-item label="当前所在机构:">
              <!-- <el-select v-model="form.currentAgencyId" placeholder="请选择当前所在机构" style="width: 100%;" /> -->
              <Treeselect
                v-model="form.currentAgencyId"
                placeholder="请选择"
                :options="departTree"
                :normalizer="normalizer"
              />
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="8" style="padding-left: 50px; padding-right: 30px;">
            <el-button type="primary" @click="searchFn">搜索</el-button>
            <el-button @click="resetFn">重置</el-button></el-col>
        </el-row>
        <el-form-item />
      </el-form>
    </el-card>
    <!-- 中间导航栏 -->
    <el-card class="tabchange-card" style="margin-bottom:20px;">
      <div class="tab-change">
        <div class="tab-item" @click="changeFn1">
          <span class="status">全部</span>
          <span class="status-num">{{ getsum }}</span>
        </div>
        <div class="tab-item" @click="changeFn2">
          <span class="status">新建</span>
          <span class="status-num">{{ tabCounts[0] }}</span>
        </div>
        <div class="tab-item" @click="changeFn3">
          <span class="status">已装车</span>
          <span class="status-num">{{ tabCounts[1] }}</span>
        </div>
        <div class="tab-item " @click="changeFn4">
          <span class="status">运输中</span>
          <span class="status-num">{{ tabCounts[2] }}</span>
        </div>
        <div class="tab-item" @click="changeFn5">
          <span class="status">到达终端网点</span>
          <span class="status-num">{{ tabCounts[3] }}</span>
        </div>
        <div class="tab-item" @click="changeFn6">
          <span class="status">拒收</span>
          <span class="status-num">{{ tabCounts[4] }}</span>
        </div>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card>
      <el-table
        v-loading="isloading"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <template v-slot:empty>
          <div style="text-align: center; padding: 20px;">
            <!-- 空状态 -->
            <el-empty description="这里空空如也" />
          </div>
        </template>
        <!-- 序号 -->
        <el-table-column
          type="index"
          label="序号"
          width="50"
        />
        <!-- 运单编号 -->
        <el-table-column
          prop="id"
          label="运单编号"
          width="170"
        />
        <!-- 订单编号 -->
        <el-table-column
          prop="orderId"
          label="订单编号"
          width="170"
        />
        <!-- 运单状态 -->
        <el-table-column
          prop="city"
          label="运单状态"
          width="120"
        >
          <template v-slot="{row}">
            <span v-if="row.status == 1">新建</span>
            <span v-else-if="row.status == 2">已装车</span>
            <span v-else-if="row.status == 3">到达</span>
            <span v-else-if="row.status == 4">到达终端网点</span>
            <span v-else-if="row.status == 5">已签收</span>
            <span v-else-if="row.status == 6">拒收</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <!-- 调度状态 -->
        <el-table-column
          prop="address"
          label="调度状态"
          width="100"
        >
          <template v-slot="{row}">
            <span v-if="row.schedulingStatus == 1">待调度</span>
            <span v-else-if="row.schedulingStatus == 2">未匹配路线</span>
            <span v-else-if="row.schedulingStatus == 3">已调度</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <!-- 起始营业部 -->
        <el-table-column
          prop="startAgencyName"
          label="起始营业部"
          width="120"
        />
        <!-- 终点营业部 -->
        <el-table-column
          prop="startAgencyName"
          label="终点营业部"
          width="150"
        />
        <!-- 当前所在机构 -->
        <el-table-column
          prop="currentAgencyName"
          label="当前所在机构"
          width="150"
        />
        <!-- 下一个机构 -->
        <el-table-column
          prop="nextAgencyName"
          label="下一个机构"
          width="150"
        />
        <!-- 货品总体积(立方米) -->
        <el-table-column
          prop="totalVolume"
          label="货品总体积(立方米)"
          width="150"
        />
        <!-- 货品总重量(千克) -->
        <el-table-column
          prop="totalWeight"
          label="货品总重量(千克)"
          width="200"
        />
        <!-- 创建时间 -->
        <el-table-column
          prop="created"
          label="创建时间"
          width="200"
        />
        <!-- 更新时间 -->
        <el-table-column
          prop="updated"
          label="更新时间"
          width="200"
        />
        <!-- 操作 -->
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template v-slot="{row}">
            <el-button style="text-align: center; color:#419eff" type="text" size="small" @click="$router.push(`/business/waybilldetail/${row.id}`)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 空状态 -->
      <!-- <el-empty v-else description="这里空空如也" /> -->
      <!-- 分页 -->
      <el-row type="flex" justify="center" style="margin-top: 20px;">
        <el-pagination
          :current-page="pageData.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getDepartTree } from '@/api/base'
import { transListToTreeData } from '@/utils'
import { getWayBillListApi, getCountsApi } from '@/api/business'
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },
  data() {
    return {
      isloading: false,
      tabCounts: [],
      departTree: [], // tree
      form: {
        id: '', // 运单编号
        orderId: '', // 订单id
        schedulingStatus: null, // 调度状态
        currentAgencyId: null, // 当前所在机构id
        endAgencyId: null, // 终点网点id
        startAgencyId: null, // 起始网点id
        page: 1,
        pageSize: 10
      },
      tableData: [],
      listData: {
        id: '', // 运单编号
        orderId: '' // 订单id
      },
      counts: 0, // 总页数
      pageData: {
        page: 1,
        pageSize: 10
      },
      // shu
      value: null,
      options: [
        { key: 'a', name: 'a', subOptions: [{ key: 'aa', name: 'aa' }] }
      ]

      // sum: 0
    }
  },
  computed: {
    getsum() {
      return this.tabCounts.reduce((item, sum) => {
        return item + Number(sum)
      }, 0)
    }
  },
  created() {
    this.getWayBillList()
    this.getDepartTrees()
  },
  methods: {
    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 获取运单管理数据
    async getWayBillList() {
      this.isloading = true
      const res = await getWayBillListApi({
        ...this.listData,
        ...this.pageData
      })
      console.log(res)
      this.tableData = res.items
      this.isloading = false
      this.counts = Number(res.counts)
      const arr = await getCountsApi()
      console.log(arr)
      this.tabCounts = Object.values(arr)
    },
    async getDepartTrees() {
      this.departTree = transListToTreeData(
        JSON.parse(await getDepartTree()), '0')
      console.log(this.departTree)
      // 选择第一个节点
      this.currentNode = this.selectFirstNode(this.departTree)
      // this.$refs.tree.setCurrentKey(this.currentNode.id) // 选中某个节点
      // this.queryDetail() // 查询详情id
    },
    selectFirstNode(arr) {
      let node = null
      if (arr[0].children && arr[0].children.length) {
        node = this.selectFirstNode(arr[0].children)
      } else {
        node = arr[0]
      }
      return node
    },
    // 搜索功能
    async searchFn() {
      this.isloading = true
      const res = await getWayBillListApi({ ...this.form })
      this.tableData = res.items
      console.log(this.tableData)
      this.counts = +res.counts
      this.isloading = false
    },
    // 重置表单
    resetFn() {
      this.$refs.form.$el.reset()
    },
    // 每页有几条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      // this.pageData.pageSize = val
      // this.getBusiList()
    },
    // 当前是第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      // this.pageData.page = val
      // this.getBusiList()
    },
    // tab切换
    // 1.全部
    async changeFn1() {
      this.isloading = true
      this.getWayBillList()
      this.isloading = false
    },
    // 2.新建
    async changeFn2() {
      this.isloading = true
      const res = await getWayBillListApi({
        id: '',
        orderId: '',
        page: 1,
        pageSize: 10,
        status: 1
      })
      console.log(res)
      this.counts = +res.counts
      this.tableData = res.items
      this.isloading = false
    },
    // 3.已装车
    async changeFn3() {
      this.isloading = true
      const res = await getWayBillListApi({
        id: '',
        orderId: '',
        page: 1,
        pageSize: 10,
        status: 2
      })
      console.log(res)
      this.counts = +res.counts
      this.tableData = res.items
      this.isloading = false
    },
    // 4.运输中
    async changeFn4() {
      this.isloading = true
      const res = await getWayBillListApi({
        id: '',
        orderId: '',
        page: 1,
        pageSize: 10,
        status: 3
      })
      console.log(res)
      this.counts = +res.counts
      this.tableData = res.items
      this.isloading = false
    },
    // 5.到达终端网点
    async changeFn5() {
      this.isloading = true
      const res = await getWayBillListApi({
        id: '',
        orderId: '',
        page: 1,
        pageSize: 10,
        status: 4
      })
      console.log(res)
      this.counts = +res.counts
      this.tableData = res.items
      this.isloading = false
    },
    // 6.拒收
    async changeFn6() {
      this.isloading = true
      const res = await getWayBillListApi({
        id: '',
        orderId: '',
        page: 1,
        pageSize: 10,
        status: 6
      })
      console.log(res)
      this.counts = +res.counts
      this.tableData = res.items
      this.isloading = false
    }
  }
}

</script>

<style lang="scss" scoped>
.waybill-container{
  padding: 20px;
  padding-top: 23px;

    .el-table{
      border: 1px solid #ebeef5;
      font-size: 14px;
    }
    ::v-deep .el-table th.el-table__cell{
      background-color: #f8faff;
    }
  .search-card-box{
    overflow:visible;
  }
  ::v-deep .search-card-box .el-card__body {
      padding-left: 0;
      padding-bottom: 40px;
      .el-row {
       margin: 0!important;
       .el-form-item {
       margin-bottom: 20px;
      }
      .el-form-item__label {
        color: #20232a;
        font-weight: 400;
        text-align: right;
        padding-left: 10px;
        box-sizing: border-box;
         white-space: nowrap;
      }
     .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
      }
      .el-button {
        width: 90px;
        padding: 10px 20px!important;
        border-radius: 5px!important;
        font-weight: 400;
      }
      .el-button--primary {
        height: 40px;
      }
      .el-button--default {
         width: 90px;
         margin-left: 18px;
         border-radius: 5px;
       }
     }
     .el-form-item__content{
      display: flex;
     }
  }
  ::v-deep .tabchange-card .el-card__body{
    padding: 0;
    height: 48px;
    .tab-change{
      display: flex;
      border-radius: 4px;
      .tab-item {
        width: 120px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}
</style>

